<template>
  <div class="toUpdate">
    <van-tabs
      v-model="active"
      animated
      title-inactive-color="white"
      background="#fc6976"
      title-active-color="white"
    >
      <van-tab v-for="(item, index) in title" :title="item" :key="index">
        <div class="selected">
          <div class="image">
            <div class="imgs" v-for="(item, index) in image" :key="index">
              <div @click="details(item.id)">
                <img :src="item.url" alt="" />
                <p>4.8</p>
              </div>
              <h2>{{ item.name }}</h2>
            </div>
          </div>
          <div class="bottom">已经到底了,看看前一天吧~</div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      image: [
        {
          id: 1,
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          name: "斗破苍穹",
          classification: "热血",
          people: 11111,
        },
        {
          id: 2,
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          name: "凤逆天下",
          classification: "热血",
          people: 11111,
        },
        {
          id: 3,
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          name: "绝世战魂",
          classification: "热血",
          people: 11111,
        },
        {
          id: 4,
          url: "https://image.yqmh.com/mh/108246.jpg-300x400.webp",
          name: "她来了，请趴下",
          classification: "热血",
          people: 11111,
        },
        {
          id: 5,
          url: "https://image.yqmh.com/mh/108693.jpg-300x400.webp",
          name: "你一笑就甜倒我八颗牙",
          classification: "恋爱",
          people: 11111,
        },
        {
          id: 6,
          url: "https://image.yqmh.com/mh/108632.jpg-300x400.webp",
          name: "龙腾战尊",
          classification: "穿越",
          people: 11111,
        },
      ],
      title: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    };
  },
  methods: {
    details(id) {
      this.$router.push({ name: "details", query: { id: id } });
    },
  },
};
</script>
<style lang="less">
.toUpdate {
  width: 100%;
  height: 100vh;
  .van-tabs {
    .van-tabs__line {
      background-color: white;
    }
  }
  .selected {
    height: 100vh;
    margin: 2% auto;
    .bottom {
      width: 100%;
      height: 60px;
      text-align: center;
      color: #999;
      font-size: 12px;
    }
    .image {
      width: 100%;
      height: 70%;
      .imgs {
        float: left;
        margin: 0 1.6%;
        margin-top: 20px;
        width: 30%;
        height: 40%;
        background-color: rgba(246, 246, 246, 0.8);
        border-radius: 5px;
        div {
          height: 80%;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          position: relative;
          background: rgb(31, 220, 245);
          img {
            width: 100%;
            height: 100%;
            position: absolute;
          }
          p {
            position: absolute;
            top: 2%;
            right: 5%;
            font-size: 12px;
            margin: 0;
            padding: 2px 5px;
            color: white;
            background-color: #fc6976;
            border-radius: 5px;
          }
        }
        h2 {
          font-size: 14px;
          padding: 5px 10px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: 500;
        }
      }
    }
  }
}
</style>